<template>
    <div>
        <div class="header flexbetween">
            <div class="flexleft" style="flex:1">
                <div class="shutup pointer">
                    <i class="el-icon-close" style="color: #fff;font-size: 24px;"></i>
                </div>
                <div class="margin-left1 margin-right3">
                    <img src="@/assets/img/layout/logo.png" alt="" class="logoimg">
                </div>
                <div class="title">新增模板</div>
            </div>
            <ul class="toptext flexcenter" style="flex:2">
                <li class="cicle focus margin-right1 ">1</li>
                <li class="colorfff margin-right1">模板基础信息</li>
                <span class="fgline margin-right1"></span>
                <li class="cicle focus margin-right1">2</li>
                <li class="colorfff margin-right1">设置模板控件</li>
            </ul>
            <ul class="flexright" style="flex:1">
                <li class="margin-right3 colorfff btn1 pointer">上一步</li>
                <li class="margin-right3 colorfff btn2 pointer">保存模板</li>
            </ul>
        </div>
        <div class="contentbox">
            <div class="leftFunction ffffff">
                <el-collapse v-model="activeNames" style="padding:0 15px">
                    <el-collapse-item title="基础控件" name="1">
                        <div class="flexleft flex_wrap">
                            <div class="flexcolumn itembox margin-bottom1" v-for="item in functionlist" :key="item.id"
                                draggable="true" @dragstart="drag($event, item)">
                                <img :src="item.icon" alt="" class="iconsize">
                                <p>{{ item.name }}</p>
                            </div>
                        </div>
                        <hr>
                        <div class="flexleft flex_wrap">
                            <div class="flexcolumn itembox margin-top1">
                                <img src="@/assets/img/template/icon11.png" alt="" class="iconsize">
                                <p>签署区</p>
                            </div>
                            <div class="flexcolumn itembox margin-top1">
                                <img src="@/assets/img/template/icon12.png" alt="" class="iconsize">
                                <p>骑缝章</p>
                            </div>
                        </div>
                    </el-collapse-item>
                    <el-collapse-item title="已添加控件列表" name="2">
                        <ul>
                            <li class="itemcontrol flexbetween margin-top1"
                                :class="item.active ? 'controlfocus' : 'controlnofocus'" v-for="(item, index) in list"
                                :key="item.id" @click="scrollto(item)">
                                <div>
                                    <span class="redstar" v-show="item.require">*</span>
                                    <span>{{ item.contentValue }}</span>
                                </div>
                                <i class="el-icon-delete pointer" @click="list.splice(index, 1)"></i>
                            </li>
                        </ul>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </div>
        <div class="tuozhuaibox" @drop="drop($event)" @dragover="allowDrop($event)">
            <div style="background-image: url('https://logist.yuntaiqi.com/uploads/20230330/e2dcb7203a8fe13185e7b53d6953b5c8.jpg');background-repeat: no-repeat; background-size: 100%,1902px;width: 100%;height: 1902px;">
            <DDR v-for="item in list" :key="item.id" v-model="item.transform" :beforeActive="handleActive"
                    :active="item.active" :id="item.id" :rotatable="false" :parent="true" :resizeHandler="item.resizeHandler"
                    @dragend="dragend($event, item)">
                    <ul class="overhidden" :class="item.active ? 'controlfocus' : 'controlnofocus'">
                        <!-- 单行文本 -->
                        <li v-if="item.parentid == 1">{{ item.contentValue }}</li>
                        <!-- 多行文本 -->
                        <li v-if="item.parentid == 2">{{ item.contentValue }}</li>
                        <!-- 身份证号 -->
                        <li v-if="item.parentid == 3">{{ item.contentValue }}</li>
                        <!-- 数字 -->
                        <li v-if="item.parentid == 4">{{ item.contentValue }}</li>
                        <!-- 日期 -->
                        <li v-if="item.parentid == 5" class="flexbetween">
                            <span>{{ item.contentValue }}</span>
                            <i class="el-icon-date"></i>
                        </li>
                        <!-- 下拉选择 -->
                        <li v-if="item.parentid == 6" class="flexbetween">
                            <span>{{ item.contentValue }}</span>
                            <i class="el-icon-arrow-down"></i>
                        </li>
                    </ul>
                </DDR>
            </div>
            
        </div>
        <div class="rightFunction ffffff" v-if="activeid">
            <el-collapse v-model="activeNames2" style="padding:0 15px">
                <el-collapse-item title="选择参与方" name="1">
                    <el-select v-model="value" placeholder="请选择参与方">
                        <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value">
                            <div class="flexleft">
                                <p class="yuan" :class="item.type == 1 ? 'lan' : 'huang'"></p>
                                <p style="color: #333;">{{ item.lable }}({{ item.name }})</p>
                            </div>
                            <span style="float: left">{{ item.label }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                        </el-option>
                    </el-select>
                </el-collapse-item>
                <el-collapse-item title="控件属性设置" name="2">
                    <el-checkbox v-model="listmsg.require">此项必填</el-checkbox>
                    <p class="margin-top1"><span class="redstar">*</span>控件名称</p>
                    <el-input v-model="listmsg.contentValue" placeholder="请输入内容"></el-input>
                    <p class="margin-top1"><span class="redstar">*</span>X</p>
                    <el-input placeholder="请输入内容" v-model="listmsg.transform.x" :disabled="true">
                    </el-input>
                    <p class="margin-top1"><span class="redstar">*</span>Y</p>
                    <el-input placeholder="请输入内容" v-model="listmsg.transform.y" :disabled="true">
                    </el-input>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>

<script>
import DDR from 'yoyoo-ddr';
import 'yoyoo-ddr/dist/yoyoo-ddr.css';
export default {
    components: { DDR },
    data() {
        return {
            cities: [
                {
                    lable: "企业-签署方",
                    name: "蓝海集团科技有限公司",
                    type: 1,
                    value: "企业-签署方"
                },
                {
                    lable: "个人-签署方",
                    name: "李华",
                    type: 2,
                    value: "个人-签署方"

                }
            ],
            value: "企业-签署方",
            checked: true,
            functionlist: [
                {
                    icon: require("@/assets/img/template/icon1.png"), name: "单行文本", id: 1,
                    resizeHandler: [
                        'r',//右中
                    ],
                    contentValue: "单行文本",
                    transform: { width: 200, height: 30, rotation: 0 },
                },
                {
                    icon: require("@/assets/img/template/icon2.png"), name: "多行文本", id: 2,
                    resizeHandler: [
                        'r',//右中
                        'br',//右下
                    ],
                    contentValue: "多行文本",
                    transform: { width: 200, height: 100, rotation: 0 }
                },
                {
                    icon: require("@/assets/img/template/icon3.png"), name: "身份证号", id: 3,
                    resizeHandler: [
                        'tl',//上左
                        'tm',//上中
                        'tr',//上右
                        'r',//右中
                        'br',//右下
                        'bm',//下中
                        'bl',//下左
                        'l',//左中
                    ],
                    contentValue: "身份证号",
                    transform: { width: 200, height: 30, rotation: 0 }
                },
                {
                    icon: require("@/assets/img/template/icon4.png"), name: "数字", id: 4,
                    resizeHandler: [
                        // 'tl',//上左
                        // 'tm',//上中
                        // 'tr',//上右
                        'r',//右中
                        // 'br',//右下
                        // 'bm',//下中
                        // 'bl',//下左
                        // 'l',//左中
                    ],
                    contentValue: "数字",
                    transform: { width: 200, height: 30, rotation: 0 }
                },
                {
                    icon: require("@/assets/img/template/icon5.png"), name: "日期", id: 5,
                    resizeHandler: [],
                    contentValue: "日期",
                    transform: { width: 200, height: 30, rotation: 0 }
                },
                {
                    icon: require("@/assets/img/template/icon6.png"), name: "下拉选择", id: 6,
                    resizeHandler: ['r'],
                    contentValue: "下拉选择",
                    transform: { width: 200, height: 30, rotation: 0 }
                },
                {
                    icon: require("@/assets/img/template/icon7.png"), name: "单选", id: 7,
                    resizeHandler: [],
                    contentValue: "单选",
                    transform: { width: 30, height: 30, rotation: 0 }
                },
                {
                    icon: require("@/assets/img/template/icon8.png"), name: "多选", id: 8,
                    resizeHandler: [
                        'r',//右中
                    ],
                    contentValue: "多选",
                    transform: { width: 30, height: 30, rotation: 0 }
                },
                {
                    icon: require("@/assets/img/template/icon9.png"), name: "勾选", id: 9,
                    resizeHandler: [],
                    contentValue: "√",
                    transform: { width: 30, height: 30, rotation: 0 }
                },
                {
                    icon: require("@/assets/img/template/icon10.png"), name: "图片", id: 10,
                    resizeHandler: [
                        'tl',//上左
                        'tm',//上中
                        'tr',//上右
                        'r',//右中
                        'br',//右下
                        'bm',//下中
                        'bl',//下左
                        'l',//左中
                    ],
                    contentValue: "图片",
                    transform: { width: 200, height: 100, rotation: 0 }
                }, {
                    icon: require("@/assets/img/template/icon11.png"), name: "签署区", id: 11,
                    resizeHandler: [
                        'tl',//上左
                        'tm',//上中
                        'tr',//上右
                        'r',//右中
                        'br',//右下
                        'bm',//下中
                        'bl',//下左
                        'l',//左中
                    ],
                    contentValue: "签署区",
                    transform: { width: 200, height: 200, rotation: 0 }
                },
            ],
            activeNames: ["1", "2"],
            activeNames2: ["1", "2"],
            list: [],//控件列表
            dragitem: {},//拖拽地当前对象
            generateid: 0,//生成id计数flag
            listmsg:{},//当前选中的对象
            activeid:""
        };
    },
    watch:{
        list:{
            handler(newval){
                newval.forEach(item => {
                    if (item.active) {
                        this.listmsg = item
                        this.activeid = item.id
                    }
                })
            }
        }
    },
    methods: {
        // 滚动到指定位置
        scrollto(item){
            let parent = document.querySelector('.tuozhuaibox');
            parent.scrollTop = item.transform.y - 100
            let arr = JSON.parse(JSON.stringify(this.list))
            arr.forEach(current => {
                if(item.id==current.id){
                    current.active = true
                }else{
                    current.active = false
                }
            })
            this.list = JSON.parse(JSON.stringify(arr))
        },
        // 左边拖拽事件
        drag(e, item) {
            this.dragitem = item
        },
        // 允许放下拖拽
        allowDrop(ev) {
            ev.preventDefault();
        },
        // 放下事件
        drop(ev) {
            console.log(ev);
            ev.preventDefault();
            let arr = JSON.parse(JSON.stringify(this.list))
            arr.forEach(item => {
                item.active = false
            })
            this.generateid = arr.length
            let transform = this.dragitem.transform
            this.$set(transform, "x", ev.offsetX)
            this.$set(transform, "y", ev.offsetY)
            arr.push(
                {
                    id: this.generateid + 1,//id数据
                    active: true, //控件选中状态
                    transform: transform,
                    controlName: this.dragitem.name,//控件名称
                    content: this.dragitem.content,//控件内容
                    contentValue: this.dragitem.contentValue,//控件值
                    resizeHandler: this.dragitem.resizeHandler,//允许拖拽的方向
                    parentid: this.dragitem.id,//控件id
                    require:true
                })
            this.list = JSON.parse(JSON.stringify(arr))
            this.dragitem = {}
        },
        handleActive(id) {
            // 如果active属性和该函数的返回值都为false时，组件不会响应鼠标操作
            // 将数组内对应id的数据同步为true
            this.list = this.list.map((item) => {
                if (item.id === id) {
                    item = { ...item, active: true };
                } else if (item.active) {
                    item = { ...item, active: false };
                }
                return item;
            });
            return true;
        },
        dragstart(e) {
            console.log(e, "拖动前数据信息")
        },
        dragend(e, item) {
            console.log(e, "拖动结束数据信息")
            console.log(item, "拖动的当前对象")

        }
    },
};
</script>

<style lang="scss" scoped>
.yuan {
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-radius: 50%;
}

.lan {
    background-color: #1063f1;
}

.huang {
    background-color: #ffa126;
}

.overhidden {
    width: 100%;
    height: 100%;
    overflow: hidden;
    line-height: 30px;
}

.itemcontrol {
    padding: 5px 10px;
    box-sizing: border-box;
    width: 100%;
}

.controlfocus {
    border: 1px dashed #1063f1;
    background-color: rgba(16, 99, 241, .1);
}

.controlnofocus {
    border: 1px dashed #999;
    background-color: rgba(153, 153, 153, .1);
}

.contentbox {
    // padding: 100px 0 0;
    position: relative;
}

.contentbox2 {
    position: relative;
}

// 左侧样式表
.margin-bottom1 {
    margin-bottom: 10px;
}

.itembox {
    width: 25%;
}

.iconsize {
    width: 20px;
    height: 20px;
}

.leftFunction {
    position: absolute;
    left: 0;
    top: 55px;
    width: 300px;
    user-select: none;
    height: calc(100vh - 55px);
}

.rightFunction {
    position: absolute;
    right: 0;
    top: 55px;
    width: 300px;
    user-select: none;
    height: calc(100vh - 55px);
}

.tuozhuaibox {
    margin-top: 30px;
    box-sizing: border-box;
    width: calc(100vw - 800px);
    height: calc(100vh - 85px);
    border: 1px solid #ffa126;
    position: absolute;
	overflow-y: scroll;
    left: 400px;
    top: 55px;
    user-select: none;
}
.tuozhuaibox::-webkit-scrollbar{display:none;}

// 头部样式内容
.btn1 {
    padding: 3px 13px;
    border: 1px solid #fff;
    border-radius: 3px;
}

.btn2 {
    padding: 3px 13px;
    border: 1px solid #1063f1;
    border-radius: 3px;
    background-color: #1063f1;
}

.title {
    color: #fff;
    padding: 0 30px;
    border-left: 1px solid #fff;
    font-size: 20px;
}

.shutup {
    background-color: #3b4049;
    padding: 15px 20px;
}

.cicle {
    width: 30px;
    height: 30px;
    font-size: 16px;
    border-radius: 50%;
    line-height: 30px;
    background-color: #4e5969;
    text-align: center;
}

.focus {
    background-color: #fff;
}

.colorhui {
    color: #999;
}

.toptext {
    font-size: 14px;
}

.colorfff {
    color: #fff;
}

.fgline {
    width: 35px;
    height: 2px;
    background-color: #fff;
}

.header {
    background-color: #262729;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    box-sizing: border-box;
}

.logoimg {
    width: 110px;
    height: 28px;
    margin-top: 5px;
}

// 头部样式内容结束
</style>
<style  lang="scss">
.yoyoo-ddr{
    box-sizing: border-box !important;
}
.leftFunction .el-collapse-item__wrap,
.el-collapse-item__header {
    border: none;
}

.leftFunction .el-collapse {
    border: none;
}

.rightFunction .el-collapse {
    border: none;
}

.rightFunction .el-collapse-item__wrap,
.el-collapse-item__header {
    border: none;
}
</style>